<template>
  <view class="recharge-record">
    <view class="recordBox">
      <view class="recordList" v-for="(item, index) in inviteList" :key="index">
        <view class="item-left" v-if="item.type == '邀请'">
          <view>{{ "邀请用户:" + item.inviteeId }}</view>
          <view>{{ item.createTime }}</view>
        </view>
        <view class="item-left" v-else-if="item.type == '抽成'">
          <view>{{ "用户:" + item.inviteeId + "下单奖励" }}</view>
          <view>{{ item.createTime }}</view>
        </view>
        <view class="item-right"> +{{ "￥" + item.amount }} </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts">
import { listInvite } from "@/api/invite";
import { searchVO, Invite } from "@/typings";
import Vue from "vue";

export default Vue.extend({
  data() {
    return {
      wHeight: 0,
      searchVO: { pageNum: 1, pageSize: 10 } as searchVO,
      finish: false,
      inviteList: [] as Invite[],
    };
  },
  onReachBottom() {
    console.log("111");

    this.loadData();
  },
  methods: {
    loadData() {
      if (!this.finish) {
        listInvite(this.searchVO).then((res) => {
          if (res.pageSize > res.size) {
            this.finish = true;
          }
          this.searchVO.pageNum++;
          this.inviteList.push(...res.list);
        });
      }
    },
  },
  mounted() {
    this.loadData();
  },
});
</script>

<style lang="scss" scoped>
.recharge-record {
  background: #ffffff;
  padding-bottom: 200rpx;
}

.recordBox {
  padding: 35rpx 0rpx 0rpx 35rpx;

  .recordList {
    display: flex;
    justify-content: space-between;
    padding: 30rpx 0rpx;
    border-bottom: 1rpx solid #d8d8d8;

    .item-left {
      view:first-child {
        font-size: 31rpx;
        font-weight: bold;
        color: #000000;
      }

      view:last-child {
        font-size: 24rpx;
        color: #999999;
        margin-top: 10rpx;
      }
    }

    .item-right {
      margin-right: 49rpx;
      font-size: 38rpx;
      font-weight: bold;
      color: #000000;
      margin-top: 10rpx;
    }
  }
}
</style>
